<template>
	<view>
		<view class="gl-container">
			<view class="gl-header">
				<view class="gl-header-left">
					<uni-search-bar v-model="search" placeholder="关键字搜索" cancelButton="none"
						@confirm="getSearch"></uni-search-bar>
				</view>
				<view class="gl-header-right">
					<view class="gl-button gl-button-success" @tap="addProduct()">
						<uni-icons type="folder-add" size="18" color="#fff"></uni-icons>
						<text style="font-size: small;">新增</text>
					</view>
					<!--
					<view class="gl-button gl-button-warning">
						<uni-icons type="compose" size="18" color="#fff"></uni-icons>
						<text style="font-size: small;">编辑</text>
					</view>
					<view class="gl-button gl-button-error">
						<uni-icons type="trash" size="18" color="#fff"></uni-icons>
						<text style="font-size: small;">移除</text>
					</view>
					-->
					<view class="gl-button gl-button-base" hover-class="button-base-hover" :hover-stay-time="100"
						@click="refresh">
						<uni-icons type="reload" size="18" color="#fff"></uni-icons>
						<text style="font-size: small;">刷新</text>
					</view>
				</view>
			</view>

			<scroll-view scroll-y="true" class="scroll-Y" style="width: 100%;">
				<view class="gl-body" style="background-color: #f8f8f8;">
					<uni-table stripe emptyText="暂无更多数据">
						<uni-tr>
							<uni-th align="center" width="30">ID</uni-th>
							<uni-th  width="100">条码</uni-th>
							<uni-th>名称</uni-th>
							<uni-th>大类</uni-th>
							<uni-th>小类</uni-th>
							<uni-th>状态</uni-th>
							<uni-th>创建时间</uni-th>
							<uni-th>操作</uni-th>
						</uni-tr>
						<uni-tr v-for="(item,index) in tmpData" :key="index">
							<uni-td>{{item.id}}</uni-td>
							<uni-td>{{item.idcode}}</uni-td>
							<uni-td>{{item.name}}</uni-td>
							<uni-td>{{item.model.name}}</uni-td>
							<uni-td>{{item.modes.name}}</uni-td>
							<uni-td>
								<switch :checked="Boolean(item.status)" style="transform:scale(0.7)" />
							</uni-td>
							<uni-td>{{item.create}}</uni-td>
							<uni-td>
								<view class="gl-link gl-link-base" @tap="addProduct(item)">编辑</view>
							</uni-td>
						</uni-tr>
					</uni-table>
				</view>
			</scroll-view>

			<view class="gl-footer">
				<uni-pagination :show-icon="true" :total="count" :pageSize="size" v-model="page" title="翻页"
					@change="refresh" />
			</view>

		</view>
		
		<!-- 模态窗口 -->
		<pop-goods-product ref="popGoodsProduct" title='商品信息' @logout="logout"></pop-goods-product>
	</view>
</template>

<script>
	import utils from '@/common/utils.js'
	export default {
		name: "sub-goods-product",
		data() {
			return {
				sConf: getApp().globalData,
				search: '',
				count: null, // 记录数
				size: 50, // 页大小
				page: 1, // 当前页
				tmpData: null
			};
		},
		mounted() {
			console.log('mounted');
			this.refresh();
		},
		methods: {
			getSearch(e) {
				console.log('search');
			},
			logout() {
				this.$emit('logout');
			},
			refresh() {
				console.log('refresh');
				let data = {
					'page': this.page,
					'size': this.size,
					'ordering': 'id'
				}
				utils.adminGoodsProductList(this.sConf.host, this.sConf.auth.token, data).then((res) => {
					console.log('请求成功', res);
					if (res.rescode === 401) {
						this.logout();
					}
					if (res.rescode === 200) {
						this.tmpData = res.resmsg;
						this.count = res.count;
						this.size = res.size;
					}
				});
			},
			addProduct(e=null) {
				// console.log('addProduct', e);
				this.$refs.popGoodsProduct.open(e);
			}
		}
	}
</script>

<style lang="scss"></style>